<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
    border-image-source 	用在边框的图片的路径。 	
    border-image-slice 	  图片边框向内偏移。 	
    border-image-width 	  图片边框的宽度。 	
    border-image-outset 	边框图像区域超出边框的量。 	
    border-image-repeat 	图像边框是否应平铺(repeated)、铺满(rounded 
    */

    /* border-image: image-source image-height image-width image-repeat */
    /* border-image: url("/images/border.png") 30 30 repeat;
       border-image: url("/images/border.png") 30 30 stretch; */

    /* 语法:
    <'border-image-source'> 
    || <'border-image-slice'> 
    [ / <'border-image-width'> 
    | / <'border-image-width'>? / <'border-image-outset'> ]? 
    || <'border-image-repeat'> 
    */
    .div1 {
      margin: 0 auto;
      width: 600px;
      height: 400px;
      background: red;
      border: 20px solid;
      border-image: url("../../img/border01.jpg") 80 80 80 round;
      /* border-image-slice: 27px 27px 27px 27px; */
    }
    .div2 {
      margin: 20px auto;
      width: 600px;
      height: 400px;
      border: 16px solid transparent;
      border-image: repeating-linear-gradient(-45deg, red 0, 
                                                      red 1em,
                                                      transparent 0,
                                                      transparent 2em,
                                                      #58a 0, 
                                                      #58a 3em,
                                                      transparent 0,
                                                      transparent 4em) 18;
    }
  </style>
</head>
<body>
  <div class="div1">
  </div>
  <div class="div2">

  </div>
</body>
</html>